import {Component, ViewChild, HostBinding} from '@angular/core';
import {DataSource} from '@angular/cdk/collections';
import {MatPaginator} from '@angular/material';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/observable/merge';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/of';

import {User} from './user';
import {UserService} from './user.service';
import { slideInDownAnimation } from './animations';

@Component({
  selector: 'app-root',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css'],
  providers:[UserService,MatPaginator],
  animations: [ slideInDownAnimation ]
})

export class ListComponent {

  constructor(private userService: UserService) {
  }
  @HostBinding('@routeAnimation') routeAnimation = true;
  @HostBinding('style.display')   display = 'block';
  displayedColumns = ['id', 'name', 'isOn', 'sex', 'birthDay', 'groups',
   'veryConcerned', 'abilityValue', 'remark'];
  dataSource: ExampleDataSource | null;

  users:User[];
  errorMessage:any;

  ngOnInit() {
    this.userService.getUsers().subscribe(
      datas => this.users = datas,
      error => this.errorMessage = <any>error,
      () => this.getUsers()
    );
  }

  getUsers(): void {
    this.dataSource = new ExampleDataSource(this.users)
  }
}


export class ExampleDataSource extends DataSource<any> {

  /** Connect function called by the table to retrieve one stream containing the data to render. */
 constructor(private users: User[]){
   super();
 }

  connect(): Observable<User[]> {
    return Observable.of(this.users);
  }

  disconnect() {}
}
